import { Button, DatePicker, Form, Select, Table, Image } from "antd"
import { FC, Fragment, ReactNode, useEffect, useState } from "react"
import './index.css'
import Column from "antd/lib/table/Column";
import { ColumnsType } from "antd/lib/table";
import { DeleteOutlined, EyeOutlined, EditOutlined,SearchOutlined } from '@ant-design/icons';

// 引如获取订单详情api
import * as api from '@/api/pay'
import checkbox from "antd/lib/checkbox";

// 下拉选框select的Option
const { Option } = Select;
const handleChange = (value: string) => {
    console.log(`selected ${value}`);
};

const onChange = (value: string) => {
    console.log(`selected ${value}`);
};

const onSearch = (value: string) => {
    console.log('search:', value);
};
interface DataType {
    key: React.Key;
    name: string;
    create_time: string;
    productName: string;
    price: number;
    image?: ReactNode;
    inventory: number;
    pay_status: number;
    action: ReactNode
}

type Icontent = DataType & {
    key: string,
    image: ReactNode
}

// 表格数据
const columns: ColumnsType<DataType> = [
    {
        title: '产品编号',
        dataIndex: 'order_id',
        render: (text: string) => <a>{text}</a>,
    },
    {
        title: '产品名称',
        dataIndex: 'productName',
    },
    {
        title: '产品图片',
        dataIndex: 'image',
    },
    {
        title: '总价',
        dataIndex: 'total_fee',
    },
    {
        title: '优惠',
        dataIndex: 'inventory'
    },
    {
        title: '类型',
        dataIndex: 'unid'
    },

    {
        title: '订单时间',
        dataIndex: 'create_time',
    },
    {
        title: '数量',
        dataIndex: 'quantity'
    },
    {
        title: '状态',
        dataIndex: 'order_status'
    },
    {
        title: '操作',
        dataIndex: 'action',
    },
];

let el: ReactNode = (
    <div>
        <span>每页显示</span>
        <Select defaultValue="5行" style={{ width: 80 }} onChange={handleChange}>
            <Option value="5">5条</Option>
            <Option value="10">10条</Option>
            {/* <Option value="disabled" disabled>
                    Disabled
                </Option> */}
            <Option value="12">12条</Option>
        </Select>
    </div>
)

// 表格数据
let data: DataType[] = [];
const Order = () => {
    // rowSelection object indicates the need for row selection
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record: DataType) => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
        }),
    };

    //控制modal显示隐藏
    let [show, setShow] = useState(false)
    
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const [loading, setLoading] = useState(false);
    const [order, setOrder] = useState(data)
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
    let getOrderList = () => {
        setLoading(true)
        api.getOrder()
            .then(res => {
                console.log(res.data.data);
                res.data.data.forEach((item: any) => {
                    item.image = <Image src={item.orderDetail[0].imageUrl} width={30} height={20} />
                    item.key = item._id
                    item.name=item.orderDetail[0].productName
                    item.action = <Fragment>
                        <Button icon={<EyeOutlined />}>查看</Button>
                        <Button icon={<EditOutlined />}>编辑</Button>
                        <Button onClick={() => {
                            //弹出确认框
                            setShow(true)
                        }} danger icon={<DeleteOutlined onClick={() => {
                            //弹出确认框
                            setShow(true)
                        }} />}>删除</Button>
                    </Fragment>

                    setOrder(res.data.data)
                    setLoading(false)
                })
                data = order

            })

    }
    useEffect(() => {
        getOrderList()
    }, [])


    return (
        <div>
            <div className="echars">

            </div>
            <h3>购物产品比例</h3>
            <div className="search">
                产品名称：<Select className="search-select"
                    showSearch
                    placeholder="请输入品牌名称"
                    optionFilterProp="children"
                    onChange={onChange}
                    onSearch={onSearch}
                    filterOption={(input, option) =>
                        (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                    }
                >
                    <Option value="jack">Jack</Option>
                    <Option value="lucy">Lucy</Option>
                    <Option value="tom">Tom</Option>
                </Select>
                <Form.Item className="time" label="添加时间">
                    <DatePicker placeholder="请选择时间" />
                </Form.Item>
                <Button className="search-btn" type="primary" icon={<SearchOutlined />}>
                    查询
                </Button>
            </div>
            <Table loading={loading} bordered className="ordertable" title={() => { return el; }}
                rowSelection={{
                    type: selectionType,
                    ...rowSelection,
                }}
                columns={columns}
                dataSource={data}
                pagination={{ pageSize: 4 }}
            >
                <Column title='产品编号' dataIndex='category_id' key='item.key' />
                <Column title="产品名称" dataIndex="item.name" key='item.key' />
                <Column title="产品创建者" dataIndex="creator" key='item.key' />
                <Column title="产品图片" dataIndex="item.image" key='item.key' />
                <Column title="总价" dataIndex="total_fee" key="item.key" />
                <Column title="优惠" dataIndex="unid" key="item.key" />
                <Column title="订单时间" dataIndex="create_time" key="item.key" />
                <Column title="数量" dataIndex="quantity" key="item.key" />
                <Column title="状态" dataIndex="order_status" key="item.key" />
                <Column title="操作" dataIndex="item.action" key="action" />
            </Table>
        </div>
    )
}

export default Order
